import React from 'react';
import { useState, useRef, useEffect, forwardRef } from 'react';
import Son from './Son';

// 在函数组件中, 不能给函数组件绑定ref 属性, 默认报错
// 解决方法: 可以使用 高阶组件函数 forwardRef 处理要绑定ref 的函数组件

const Father = () => {
    const [user, setUserFn] = useState({ name: '张三', age: 20 });
    const ref1 = useRef();
    const ref2 = useRef();
    useEffect(() => {
        console.log('ref1', ref1.current.innerHTML);
        console.log('ref2', ref2);
    })

    return (
        <div>
            <p ref={ref1}>我是dom节点--{user.name}--{user.age}</p>
            {/* 使用子组件 */}
            <Son ref={ref2}></Son>
            <p><button onClick={() => {
                // 在父组件中修改子组件里的数据
                ref2.current.setNewUserFn({
                    ...ref2.current.newuser,
                    age: ref2.current.newuser.age + 1
                })

            }}>李四年龄++</button></p>
        </div>
    );
}

export default Father;
